import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import { LoginWrapper, LoginBox, Input, Button } from './style'
import { actionCreators } from './store'

class Login extends PureComponent {
  render () {
    const { loginStatus } = this.props
    if (!loginStatus) {
      <LoginWrapper>
        <LoginBox>
          <Input placeholder="账号" innerRef={(input) => {this.account = input}}></Input>
          <Input placeholder="密码" type="password" innerRef={(input) => {this.password = input}}></Input>
          <Button onClick={() => this.props.login(this.account, this.password)}>登录</Button>
        </LoginBox>
      </LoginWrapper>
    } else {
      return <Redirect to='/'></Redirect>
    }
  }
}

const mapState = (state) => ({
  loginStatus: state.getIn(['login', 'login'])
})

const mapDispatch = (dispatch) => ({
  login (account, password) {
    dispatch(actionCreators.login(account.value, password.value))
  }
})

export default connect(mapState, mapDispatch)(Login)
